<template>
	<view class="con">
		<view class="top">
			<image src="https://jialianxin-1301053941.cos.ap-chengdu.myqcloud.com/b2b2c/31.png" mode="" @click="returnPage"></image>
			<text class="title">商品列表</text>
		</view>
		<view class="goods_list">
			<view class="goods_item" v-for="(item,index) in collectList" :key="index" @click="bindGoodsShop(item.id)">
				<view class="left">
					<image :src="item.image" mode=""></image>
				</view>
				<view class="right">
					<view class="title">{{item.title}}</view>
					<view class="sub_title">{{item.subtitle}}</view>
					<view class="price_box">
						<view class="xian">{{item.sku_price[0].price}}</view>
						<view class="old">{{item.original_price}}</view>
					</view>
				</view>
			</view>
		</view>
		<uni-load-more :status="loadingType"></uni-load-more>
		<!-- <view class="kong" v-if="collectList.length==0">
	    	<view class="zhongjian">
	    		<image src="https://jialianxin-1301053941.cos.ap-chengdu.myqcloud.com/new_user/kong.png" mode=""></image>
	    	</view>
	    </view> -->
	</view>
</template>

<script>
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
export default {
	components: {
		uniLoadMore
	},
	data() {
		return {
			collectList:[],
			page:1,
			loadingType: "more",
			ids:null,
			shop_id:null,
			token:'',
		};
	},
	onReachBottom() {
		this.getData()
	},
	onLoad(option) {
		this.token=option.token
		this.shop_id=option.shop_id
		this.ids=option.id
		this.getData()
	},
	methods: {
		
		getData(){
			var url = '/api/goods/goods/shop_goodss_list';
			let userInfo = uni.getStorageSync("userInfo");
			let params = {
				page:this.page,
				shop_id:this.ids
			};
			this.Unfold_data.yh_data(params, 'POST', url, res => {
				
				if (res.data.code == 1) {
					this.loadingType = 'more';
					if (res.data.data.data== null||res.data.data.data.length==0) {
						this.loadingType = 'noMore';
						return;
					}
					if (res.data.data.data.length < 10) {
						this.loadingType = "noMore";
					}
					// this.collectList = res.data.data.data;
					this.collectList = this.collectList.concat(res.data.data.data);
					this.page = this.page+ 1;
				} else {
					this.Unfold_data.showWindow(res.data.msg);
				}
			});
		},
		bindGoodsShop(id){
			uni.navigateTo({
				url:'../goods_detail/goods_detail?id='+id+'&shop_id='+this.ids+'&token='+this.token
			})
		},
		returnPage() {
			uni.navigateBack({
				delta: 1
			});
		}
	}
};
</script>

<style lang="scss" scoped>
	page{
		height: 100%;
		background-color: #f6f6f6;
	}
.con {
	.top {
		width: 750upx;
		height: 180upx;
		background: url(https://jialianxin-1301053941.cos.ap-chengdu.myqcloud.com/new_user/new_bjs.png) no-repeat;
		background-size: 750upx 180upx;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		padding-top: 60upx;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 10;
		.title {
			font-size: 38upx;
			color: #ffffff;
			line-height: 71px;
			margin-left: 240upx;
			
		}
		
		image {
			width: 24upx;
			height: 40upx;
			margin-left: 20upx;
		}
	}
    .goods_list{
    	width: 750upx;
    	padding: 0 20upx;
		margin-top: 200upx;
    	.goods_item{
    		width: 710upx;
    		height: 260upx;
    		border-radius: 25upx;
    		background-color: #FFFFFF;
    		display: flex;
    		justify-content: flex-start;
			margin-bottom: 20upx;
    		padding: 30upx;
    		.left{
    			image{
    				width: 180upx;
    				height: 180upx;
    				border-radius: 15upx;
    			}
    		}
    		.right{
    			margin-left: 20upx;
    			position: relative;
    			.title{
    				width: 440upx;
    				overflow: hidden;
    				text-overflow: ellipsis;
    				white-space: nowrap;
    				font-size: 28upx;
    				color: #333333;
    			}
    			.sub_title{
    				margin-top: 20upx;
    				width: 400upx;
    				font-size: 22upx;
    				color: #CCCCCC;
    				overflow: hidden;
    				text-overflow: ellipsis;
    				white-space: nowrap;
    			}
    			.price_box{
    				position: absolute;
    				top: 140upx;
    				display: flex;
                    justify-content: flex-start;
    				align-items: center;
    				.xian{
    					font-size: 24upx;
    					color: #dd3030;
    				}
    				.old{
    					font-size: 20upx;
    					color: #C0C4CC;
    					text-decoration: line-through;
    					margin-left: 20upx;
    				}
    			}
    		}
    	}
    }
	.kong{
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 600upx;
		.zhongjian{
			text-align: center;
			image{
				width: 180upx;
				height: 180upx;
			}
			.title{
				font-size: 28upx;
				color:#dd3030;
			}
		}
	}
}
</style>
